<template>
    <div class="btnContainerBox">
        <template v-for="(btn,index) of localButtons">
            <template v-if="index < buttonCount-1 || (index === localButtons.length - 1 && JSON.parse(btn.style))">
                <div :class="{'bpm-task-button':true,'bpm-task-button-primary':JSON.parse(btn.style)}" :key="btn.id"
                     @click="btnClick(btn)">
                    <StarOutlined v-if="btn.id === 'btnTracked' && curVm.trackedTheme=='outlined'"
                                  :style="{'color':'#1890ff'}"/>
                    <StarFilled v-else-if="btn.id === 'btnTracked' && curVm.trackedTheme=='filled'"
                                :style="{'color':'#eab207'}"/>
                    <rx-icon-show v-else-if="btn.icon" :icon="getBtnIcon(btn.icon)" size="14px"></rx-icon-show>
                    <span class="task-btn-name">{{ curVm.getI18Name(btn, 'name') }}</span>
                </div>
            </template>
            <a-dropdown v-else-if="index == buttonCount-1">
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    {{ $ti18('rxList.moreBtn', '更多') }}
                    <DownOutlined/>
                </a>
                <template #overlay>
                    <a-menu>
                        <template v-for="(innerBtn,index_) of localButtons">
                            <a-menu-item
                                v-if="index_ >= buttonCount-1 && (JSON.parse(innerBtn.style) ? index_ < localButtons.length - 1 : index_ < localButtons.length)">
                                <div
                                    :key="innerBtn.id"
                                    @click="btnClick(innerBtn)"
                                >
                                    <rx-icon-show v-if="innerBtn.icon" size="14px"
                                                  :icon="getBtnIcon(innerBtn.icon)"></rx-icon-show>
                                    <span class="task-btn-name">{{ curVm.getI18Name(innerBtn, 'name') }}</span>
                                </div>
                            </a-menu-item>
                        </template>
                    </a-menu>
                </template>
            </a-dropdown>
        </template>
    </div>
</template>

<script>
import detailButton from "./js/detailButton.js";
export default {
    name: "bpm-detail-buttons",
    props: ["curVm", "bpmActionType"],
    mixins: [detailButton],
    computed: {
        buttonCount() {
            return this.curVm.processConfig.instMaxButton || 4;
        }
    },
    methods: {
        btnClick(btn) {
            this.curVm.handMethod(btn)
        },
        getBtnIcon(icon) {
            try {
                let iconConfig = new Function(`return ${icon}`)();
                return iconConfig.icon
            } catch (e) {
                return icon
            }
        },
    }
}
</script>

<style scoped>
.task-btn-name{
    margin-left: 4px;
}
.btnContainerBox {
    display: flex;
    align-items: center;
}

.bpm-task-button {
    height: 30px;
    line-height: 28px;
    padding: 0 12px;
    cursor: pointer;
}

.bpm-task-button:hover {
    color: #4285F4;
}

.bpm-task-button.bpm-task-button-primary {
    background-color: #4285F4;
    color: #fff;
    border-radius: 4px;
}

.ant-dropdown-link {
    padding: 0 12px;
}
</style>
